<template>
  <div id="webcooperate">
  <!--group页顶部导航栏-->
  <div class="top">
    <div class="topleft">
      <div class="logo"><span class="iconfont icon-qun"></span><p>没道云协作</p></div>
      <router-link to="/web/newest"  >云笔记</router-link>
      <router-link to="/group" >云协作</router-link>
      <i class="iconfont icon-fangdajing"></i>
      <div id="search"><el-input v-model="input" placeholder="搜索..." id="input" ></el-input></div>
    </div>
    <div class="topright">
      <ul class="pic">
        <li><i class="iconfont icon-lingdang"></i></li>
        <li><i class="iconfont icon-xinxi"></i></li>
      </ul>
      <i class="headpic"><img src="../assets/emoji.jpg" alt=""></i>
      <ul class="head_nav">
        <li><router-link to="/">企业版</router-link></li>
        <li><a href="">客户端下载</a></li>
      </ul>
    </div>
  </div>
    <!--主体区域-->
    <div class="box">
      <div class="left" ref="left">
        <div class="hd">
          <div class="create">
            <i class="iconfont icon-wo"></i>
            <span class="content_text">我的工作台</span>
        </span>
          </div>
        </div>
        <div class="buttom_left_content">
          <ul class="leftbar">
            <li class="group"><div><i class="iconfont icon-qun"></i>组织与群</div></li>
            <li class="teamgroup"><div><i class="el-icon-arrow-right"></i>我的团队群</div></li>
            <li class="freegroup"><div><i class="el-icon-arrow-right"></i>我的免费群</div></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        name: "webcooperate"
    }
</script>

<style scoped>
/*顶部导航栏区域*/
  .top{
    position: fixed;
    width: 100%;
    height: 50px;
    z-index: 999;
    background: #398dee;
    min-width: 810px;
    top: 0;
    left: 0;
  }
  .topleft{
    width: 100%;
    height: 100%;
    top:0;
    left: 20px;
    position: absolute;
    background: #398dee;
  }

  .logo{
    position: relative;
    display: inline-block;
    float: left;
    margin-right: 50px;
    height: 100%;
    width: 200px;
  }
  .logo p{
    line-height: 50px;
    display: inline-block;
    font-size: 20px;
    position: absolute;
    top: 0;
    left: 50px;
    width: 150px;
    font-weight:500;
    text-align: left;
    letter-spacing: 2px;
    color: white;
  }
.logo .icon-qun{
    font-size: 25px;
    border: #FFFFFF 2px solid;
    border-radius: 10px 0 10px 10px;
    position: relative;
    color: #FFFFFF;
    float: left;
    top: 8px;
    letter-spacing: 2px;
    padding: 2px;
    box-sizing: border-box;
  }
  a{
    display: inline-block;
    height: 100%;
    width:76px;
    float: left;
    background: #398dee;
    line-height: 50px;
    font-size: 15px;
    color: white;
    opacity: 0.5;
  }
  .topleft .router-link-active{
    opacity: 1;
    background: #3178cb;
  }
  .icon-fangdajing{
    font-size: 40px;
    float: left;
    position: relative;
    left: 10px;
    top: 4px;
    color: white;
  }
  #search{
    display: inline-block;
    float: left;
    position: relative;
    top: 5px;
    left: 15px;
  }
  .head_nav{
    float: right;
  }
  .head_nav li{
    float: left;
  }
  .head_nav>li a{
    font-size: 10px;
    color: white;
    opacity: 0.8;
  }
  .headpic{
    width: 54px;
    height: 50px;
  }
  .headpic img{
    width: 38px;
    height: 38px;
    margin:6px 8px;
    border-radius: 50%;
  }
  .topright{
    position: relative;
    float: right;
    height: 100%;
    width: 508px;
    background: #398dee;
    margin-right: 10px;
  }
  .pic{

    width: 200px;
    height: 100%;
    display: inline-block;
    position: relative;
    top: -18px;
  }
  .pic li{
    display: inline-block;

    line-height: 50px;
    height: 100%;
    margin-left: 30px;
  }
  .pic i{
    font-size: 20px;
    color: white;
    cursor: pointer;
  }
/*主体区域*/
.box{
  height: 800px;
  width: 100%;
  margin-top:-10px ;
  overflow: hidden;
}
.left{
  width:15%;
  height:100%;
  background: #f5f5f5;
  float:left;
  min-width: 80px;
}
.hd{
  position: relative;
  height: 70px;
  line-height: 70px;
  width: 100%;
  border-bottom: 1px solid rgba(153,153,153,0.6);
  box-sizing:border-box;
}
.create{
  float: left;
  margin-left: 40px;
}
.icon-wo{
  font-size:21px ;
  margin-right: 10px;
  font-weight: 600;
}
.create:hover{
  cursor: pointer;
}
.create:hover>span:first-of-type{
  color: #2da1f8;
}
.content_text{
  font-size: 14px;
  color:#393939 ;
  width: 36px;
  height: 40px;
}
.leftbar{
  display: block;
  width: 100%;
}
.leftbar li{
  display: block;
  height: 50px;
  line-height: 50px;
  width: 100%;
  float: left;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis !important;
}
.leftbar li:hover{
  background: #e4edf8;
  cursor: pointer;
}
.leftbar li div {
  display: inline-block;
  margin: 0 10px;
  font-size: 14px;
  float: left;
  line-height: 50px;
  padding-left: 20px;
}
.group{
  border-bottom: 1px solid rgba(153,153,153,0.6);
}
.group div{
  line-height: 40px !important;
}
.leftbar li i{
  font-size: 25px;
  display: inline-block;
  margin:0 10px;
  /*float: left;*/
}

</style>
